<template>
  <div>

    <div class="row">
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>新增设备信息
              </div>
              <div class="cz">
              </div>
            </div>
            <div class="portlet-body">
              <div class="row">
                <div class="col-md-3 mb10">
                  <div class="search">
                     <input type="text" class="form-control" placeholder="请输入关键字">
                  </div>
                 
                </div>
                <div class="col-md-5 mb10">
                  <div class="search">
                    <select class="bs-select form-control" style="margin-right: 25px;width: 65%">
                      <option>全部</option>
                      <option>1号水泵</option>
                      <option>2号水泵</option>
                    </select>
                    <button class="btn green">查询 <i class="fa fa-search"></i></button>
                  </div>
                </div>
                  
              </div>
              <div class="tableDiv">
                <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                  <thead>
                    <tr>
                      <th>
                         序号
                      </th>
                      <th>
                         维保执行项目
                      </th>
                      <th>
                         检查结论
                      </th>
                      <th>
                         不通过描述信息
                      </th>
                      <th>
                         功能操作
                      </th>
                    </tr>
                  </thead>
                  <tbody>

                  <tr class="odd gradeX" v-for="(item,index) in list">
                    <td>
                       {{index+1}}
                    </td>
                    <td>
                       {{item.env_humidity}}
                    </td>
                    <td>
                      {{item.water_immersion}}
                    </td>
                    <td>
                      {{item.smoke_detection}}
                    </td>
                  
                    <td>
                      <a @click="lookData($data,index)">
                        编辑
                      </a> |
                      <a @click="lookData($data,index)">
                        通过
                      </a> |
                      <a @click="lookData($data,index)">
                        不通过
                      </a>
                     
                    </td>
                  </tr>
                
                  </tbody>
                </table>
            
               
                </div>
              
              
            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>

  </div>

</template>  

<style scoped>
  .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}

    p {margin: 0 0 10px;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    input.form-control,.bs-select.form-control{width: 95%;display: inline;}
    .numData{font-size: 16px;}
     @media (max-width: 768px){
    .cz{margin-bottom: 0px;}
    .dataTotal{top: -5px;}
    .bs-select{width: 60%;}
  }
</style>

<script>

  import Metronic from '../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../static/js/pages/tips.js'; 

  import optVue from '../../../config/optVue.js';
  export default {
     data(){
      return{
        list:[
        ],

        total:null, //总条数  
        lookObj:{},
        modifyNum:{},
        title:"",
        modifyType:false,
  
        pageNum: 0, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
  
  
        max:5,
        maxNum:5,
        id:null,
        index:null
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '设备维保监管';
      this.title = document.title
      optVue.sbwbjg(this);

    
    },
    methods:{
         
      lookData:function(data,index){
        window.localStorage.setItem('infor', JSON.stringify(data.list[index]))
        this.$router.push({path:'/sbwbjgInfor'})
      },
      showPageindex : function(min, max, index) {   
        if (index <= Math.ceil(max / 2)) {
            var min = 0;
            var max = max;
        }
        else if (this.pageNum - index < Math.ceil(max / 2)) {
          var min = this.pageNum - max;
          var max = this.pageNum ;
        } 
        else{
          var min = Math.ceil(index - max / 2)-1;
          var max = index + Math.ceil(max / 2)-1;
        }
        this.min = min;
        this.max = max;
      },
      nowPage:function(index){

        if(this.pageNum<=1){
          return;
        }
        this.number = index;
        if(this.number == 0){
          $(".prev").addClass("disabled");
          $(".next").removeClass("disabled");
          this.firstFlag = false;
          this.prevFlag = false;
          this.lastFlag = true;
          this.nextFlag = true;
        }
        else if(this.pageNum-1 == this.number){
          $(".next").addClass("disabled");
          $(".prev").removeClass("disabled");
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = false;
          this.nextFlag = false;
        }
        else{
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = true;
          this.nextFlag = true;
          $(".next").removeClass("disabled");
          $(".prev").removeClass("disabled");
        }
        $(".table-checkbox").closest("table").find(".checkboxes").prop({checked:false})
        

        this.showPageindex(0,this.maxNum,this.number);
        var pageArr = {
          page_num : this.number+1
        }
        optVue.sbwbglNowPag(this,pageArr);
        
      },
      nextPage:function(el){
        if(this.pageNum<=1){
          return;
        }

        $(".prev").removeClass("disabled");
        if(this.pageNum == this.number+2){

          $(".next").addClass("disabled");

        }
        if(this.pageNum == this.number+1){
          this.firstFlag = true;
          this.prevFlag = true;
          this.lastFlag = false;
          this.nextFlag = false;
          return false;
        }
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = true;
        this.nextFlag = true;
        this.number++;
        this.showPageindex(0,this.maxNum,this.number+1);
        var pageArr = {
          page_num : this.number+1
        }
        optVue.sbwbglNowPag(this,pageArr);
      },
      prevPage:function(el){
        if(this.pageNum<=1){
          return;
        }
        $(".next").removeClass("disabled");
        if(this.number == 1){
          $(".prev").addClass("disabled");
          
        }
        if(this.number == 0){
          this.firstFlag = false;
          this.prevFlag = false;
          this.lastFlag = true;
          this.nextFlag = true;
          return false;
        }
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = true;
        this.nextFlag = true;
        this.number--;
        this.showPageindex(0,this.maxNum,this.number+1);
        //var pageArr = 
        var pageArr = {
          page_num : this.number+1
        }
        optVue.sbwbglNowPag(this,pageArr);
      },
      lastPage:function(){
        if(this.pageNum<=1){
          return;
        }
        $(".next").addClass("disabled");
        $(".prev").removeClass("disabled");
        this.number = this.pageNum-1;
        this.showPageindex(0,this.maxNum,this.number)
        var pageArr = {
          page_num : this.pageNum
        }
        optVue.sbwbglNowPag(this,pageArr);
        this.firstFlag = true;
        this.prevFlag = true;
        this.lastFlag = false;
        this.nextFlag = false;
       
      },
      firstPage:function(){
        if(this.pageNum<=1){
          return;
        }

        $(".prev").addClass("disabled");
        $(".next").removeClass("disabled");
        this.number = 0;
        this.showPageindex(0,this.maxNum,this.number)
        var pageArr = {
          page_num : this.number+1
        }
        optVue.sbwbglNowPag(this,pageArr);
        this.firstFlag = false;
        this.prevFlag = false;
        this.lastFlag = true;
        this.nextFlag = true;
      },
      toPage:function(){
        if((this.page_num_ma<=0)||isNaN(this.page_num_ma)||(this.page_num_ma>this.pageNum)){
          /*提示信息*/
          Tips.init({
            type:"success",
            message:"请输有效页码",
            class:"on"
          });
          return;
        }
        var pageArr = {
          page_num : this.page_num_ma
        }
        this.number = this.page_num_ma-1;
        optVue.sbwbglNowPag(this,pageArr);
      }
    }

  }

</script>  



